<template>
  <div>
    <!-- <h3>当前最新的count值为:{{ $store.state.count }}</h3> -->
    <!-- <h3>当前最新的count值为:{{ count }}</h3> -->
    <h3>{{ showNum }}</h3>
    <button @click="sub1">-1</button>
    <button @click="subN1">-N</button>
    <!-- <button @click="sub2">-1 Async</button> -->
    <button @click="subAsync">-1 Async</button>
    <!-- <button @click="subN2">-N Async</button> -->
    <button @click="subNAsync(3)">-N Async</button>
  </div>
</template>

<script>
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['showNum'])
  },
  methods: {
    ...mapMutations(['sub', 'subN']),
    ...mapActions(['subAsync', 'subNAsync']),
    sub1() {
      // this.$store.state.count--  //错误，不能直接操作项目共享全局数据
      // this.$store.commit('sub')
      this.sub()
    },
    subN1() {
      this.subN(3)
    }
    // sub2() {
    //   this.subAsync()
    // }
    // subN2() {
    //   this.subNAsync(3)
    // }
  }
}
</script>
